import {Card} from 'antd';
import { observer} from 'mobx-react';
import CardItem from './CardItem'

@observer
class AddCard extends React.Component {

    constructor(props) {
        super(props);
        this.state={
          }
    }

    componentDidUpdate = () => {
    }
    render() {
        const {types,actions,openModal} = this.props;
        return (
            <div className="g-top-addCard">
                {
                    types.map((type)=>{
                        const {wfbeans,img,color,letter,selected,typename} = type;
                        const icontype ="icon-base " +img;
                        return (
                            <Card ecId={`${this && this.props && this.props.ecId || ''}_Card@01jaax@${type.id}`} id={letter} style={selected ? {"border-top-color":color,background:'#fff',boxShadow:'0 1px 6px hsla(0,0%,39%,.2)'} : {"border-top-color":color}}>
                                <div style={{padding:'5px 0 25px 0',textAlign:'center'}}>
                                        <div className="g-addCard-lable">
                                            <span style={{color:color,fontSize:26,marginRight:10}}><i className={icontype}/></span>{/* icon */}
                                            <span style={{height:36,lineHeight:'36px'}}>{typename}{wfbeans && ('(' + wfbeans.length + ')')}</span>{/*title */}
                                        </div>
                                </div>
                                {
                                wfbeans.map((obj)=>{
                                return <CardItem ecId={`${this && this.props && this.props.ecId || ''}_CardItem@zwbrmw@${obj.id}`} key={obj.id.toString()} wfbean={obj}  iscommon={false} actions={actions}  openModal={openModal}/>})
							    }
                            </Card>
                        )
                    })
                }
            </div>
        )
    }
}
export default AddCard